<template>
  <div class="wrapper">
    <div id="map_container"></div>
  </div>
</template>

<script>
import BMapGL from "BMapGL";
var mapvgl = require("mapvgl");

export default {
  name: "heat2",
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    init() {
      var map = new BMapGL.Map("map_container");

      var point = new BMapGL.Point(116.387456, 39.925406);
      map.centerAndZoom(point, 12);
      map.setHeading(64.5);
      map.setTilt(73);
      var view = new mapvgl.View({
        map: map
      });

      fetch("./static/beijing.json")
        .then(rs => {
          return rs.json();
        })
        .then(rs => {
          rs = rs.result.data[0].bound;
          var data = [];
          for (var i = 0; i < rs.length; i++) {
            var item = rs[i];
            data.push({
              geometry: {
                type: "Point",
                coordinates: [item[0], item[1]]
              },
              properties: {
                count: item[2]
              }
            });
          }
          var heatmap = new mapvgl.HeatmapLayer({
            size: 600, // 单个点绘制大小
            max: 40, // 最大阈值
            height: 0, // 最大高度，默认为0
            unit: "m", // 单位，m:米，px: 像素
            gradient: {
              // 对应比例渐变色
              0.25: "rgba(0, 0, 255, 1)",
              0.55: "rgba(0, 255, 0, 1)",
              0.85: "rgba(255, 255, 0, 1)",
              1: "rgba(255, 0, 0, 1)"
            }
          });
          view.addLayer(heatmap);
          heatmap.setData(data);
        });
    }
  },
  created() {},
  mounted() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  width: 100vw;
}
#map_container {
  width: 100%;
  height: 100%;
  margin: 0;
}
</style>
